<template>
	<view class="container" style="padding-bottom: 90px">
		<view v-if="tabMenus == null || tabMenus.length == 0" class="data-empty-wh100">
			<u-empty />
		</view>
		<view v-else class="wh100" style="overflow-y: scroll">
			<view class="tabs">
				<u-tabs :list="tabMenus" lineColor="#F3C45D" lineWidth="30" :activeStyle="activeStyle" @click="onTabClick"></u-tabs>
			</view>
			<view v-if="leftMenus == null || leftMenus.length == 0" class="data-empty-wh100">
				<u-empty />
			</view>
			<view v-else class="items-container" style="padding-bottom: 90px">
				<view
					class="items"
					@click="onItemClick(item)"
					:id="`menu-${item.id}`"
					:class="{ current: currentCateIdx == index }"
					style="margin: 15px 20rpx; background-color: #fff; border-radius: 10px; padding: 12px 15px; display: flex; justify-content: space-between; line-height: 1"
					v-for="(item, index) in leftMenus"
					:key="item.id"
				>
					<text>{{ item.name }}</text>
					<text style="font-size: 24rpx; color: #535353">
						关联菜品：
						<text style="font-weight: bold">
							{{ item.foodCount }}
						</text>
					</text>
				</view>
				<!-- 加载更多 -->
				<!--     <u-loadmore
          @click="console.log(`hello world`)"
          :status="loadStatus"
          :loading-text="loadingText"
          :loadmore-text="loadmoreText"
          :nomore-text="nomoreText"
          :loadmore="onReachBottomEvent"
          line
        /> -->
			</view>
		</view>
		<view
			v-if="tabMenus.length > 0 && tabMenus != null"
			class="bottom-add"
			style="
				display: flex;
				align-items: center;
				justify-content: center;
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				height: 50px;
				background-color: #f3c45d;
				color: #fff;
				font-size: 18px;
				font-weight: bold;
			"
			@click="btnAddClick"
		>
			新建做法
		</view>
	</view>
</template>

<script>
import { uNavigateTo, umodal, utoast, uShowLoading, uHideLoading } from '../../../utils/uniUtils.js';
export default {
	comments: {},
	data() {
		return {
			searchParam: {
				name: ''
			},
			prefixIconStyle: {
				fontSize: '24px'
			},
			activeStyle: {
				color: '#F3C45D'
			},
			pattern: {
				buttonColor: '#F3C45D'
			},
			tabMenus: [],
			leftMenus: [],
			currentCateIdx: 0, //左边默认分类
			addPriceWayList: [
				// 加价方式
				{
					id: 0,
					value: '不加价'
				},
				{
					id: 1,
					value: '固定加价'
				},
				{
					id: 2,
					value: '按重量加价'
				}
			],
			details: null, //   做法详情
			disabled: true, // 禁用
			lock: false, // 节流锁

			loadStatus: 'loadmore',
			loadingText: '努力加载中。。。',
			loadmoreText: '上拉加载更多~~',
			nomoreText: '已全部加载~~',

			/* 分页数据区域 */
			pageNum: 1,
			pageSize: 10,
			total: 0,
			showLoadMore: false,
			tabCurrentId: 0 // 当前选中的tabId
		};
	},
	async mounted() {
		await this.GetFoodTaskCategory();
	},
	onReachBottom() {
		this.onReachBottomEvent();
	},
	methods: {
		/**
		 * 触底事件
		 */
		onReachBottomEvent() {
			console.log('onReachBottom');
			// 拉新数据再拼接
			if (this.leftMenus.length < this.total) {
				this.showLoadMore = true;
				setTimeout(async () => {
					uShowLoading();
					if (this.showLoadMore) {
						this.pageNum += 1;
					}
					this.loadStatus = 'loading';
					await this.GetFoodTask();
					uHideLoading();
				}, 300);
			} else {
				// utoast("没有更多数据了!", toastIconEnum.error);
				return;
			}
		},
		fabClick() {
			uNavigateTo('/pages/workbench/food/transfer');
		},
		bindPicker1Change(e) {
			// console.log("e-->", e);
			this.details.taskTypeId = this.tabMenus[e.detail.value].id;
		},
		bindPicker2Change(e) {
			// console.log("e-->", e);
			this.details.addPriceWay = this.addPriceWayList[e.detail.value].id;
		},
		/**
		 *  上tab栏 点击事件
		 */
		async onTabClick(e) {
			this.tabCurrentId = e.id;
			this.pageNum = 1;
			this.leftMenus = [];
			await this.GetFoodTask(e.index);
			this.currentCateIdx = 0;
			this.disabled = true;
		},
		/**
		 * 左tab栏点击事件
		 */
		onLeftClick(idx) {
			this.currentCateIdx = idx;
			this.details = this.leftMenus[idx];
			this.disabled = true;
		},
		/**
		 * 做法分组选择事件
		 */
		taskCataChange(e) {
			console.log(e);
		},
		/**
		 * 获取做法分类
		 */
		async GetFoodTaskCategory() {
			let {
				data: { list }
			} = await this.$api.GetFoodTaskCategory({
				pageNum: 1,
				pageSize: 9999
			});
			console.log('list-->', list);
			this.tabMenus = list;
			await this.GetFoodTask();
		},
		/**
		 * 获取做法
		 */
		async GetFoodTask(idx = 0) {
			if (this.tabMenus[idx] != null) {
				// const paging = uni.createSelectorQuery().in(this).select("#paging");
				// console.log("paging", paging);
				// 父组件调用
				let {
					data: { list, total }
				} = await this.$api.GetFoodTask({
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					taskTypeId: this.tabMenus[idx].id
				});
				this.total = total;

				this.leftMenus = [...this.leftMenus, ...list];
				if (this.leftMenus.length == this.total) {
					this.loadStatus = 'nomore';
				} else {
					this.loadStatus = 'loadmore';
				}
				this.showLoadMore = false;
			}
		},

		async btnDel() {
			const res = await umodal();
			// 确定删除
			if (res) {
				await this.$api.DelFoodTask({
					id: this.details.id
				});
				await this.GetFoodTaskCategory();
			}
		},
		/**
		 * 添加按钮点击事件
		 */
		async btnAddClick() {
			uni.navigateTo({
				url: '/pages/workbench/task/doAdd?tabCurrentId=' + (this.tabCurrentId ? this.tabCurrentId : this.tabMenus[0].id)
			});
		},
		//编辑按钮点击事件
		async btnEditClick() {
			this.disabled = false;
		},

		async btnSaveClick() {
			await this.EditFoodTask();
		},
		/**
		 *  编辑数据
		 */
		async EditFoodTask() {
			if (this.details.name.trim().length == 0) {
				utoast('做法名称为空！', 'error');
				return;
			}
			const res = await this.$api.EditFoodTask(this.details);
			if (res.code == 0) {
				await this.GetFoodTaskCategory();
				this.disabled = true;
			}
		},
		/**
		 * 做法点击事件
		 * @param item
		 */
		onItemClick(item) {
			uni.navigateTo({
				url: '/pages/workbench/task/doEdit?id=' + item.id
			});
		}
	}
};
</script>

<style lang="scss" scoped>
@import '~@/pages/workbench/food/list.scss';

.container {
	height: 100.1vh;
	//   overflow-y: scroll;

	// 吸顶导航
	.tabs {
		position: sticky;
		top: 0;
		background-color: #fff;
		z-index: 666;
	}

	.details {
		background-color: #fff;

		.form-item {
			display: flex;
			padding: 14rpx 0;

			.lbl {
				width: 80px;
				font-size: 14px;
			}

			.form-item-right {
				flex: 1;
			}
		}
	}

	.btn-group {
		display: flex;
		justify-content: space-around;
		padding-top: 22rpx;
	}
}
</style>
